<template>
  <div class="device-binding">
    <el-card>
      <template #header>
        <div class="flex justify-between items-center">
          <span class="font-medium">设备绑定</span>
          <el-button type="primary" :icon="CirclePlus" @click="openDeviceForm('绑定新设备')">
            绑定新设备
          </el-button>
        </div>
      </template>
      
      <ProTable
        ref="proTableRef"
        :columns="columns"
        :search-columns="searchColumns"
        :request-api="getTableList"
        :init-param="{ fleetId: fleetId }"
        row-key="id"
      >
        <template #operation="{ row }">
          <el-button
            type="primary"
            link
            :icon="EditPen"
            @click="openDeviceForm('编辑绑定', row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            link
            :icon="Delete"
            @click="unbindDevice(row)"
          >
            解绑
          </el-button>
        </template>
      </ProTable>
    </el-card>
    
    <!-- 设备表单 -->
    <DeviceForm ref="deviceFormRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { CirclePlus, EditPen, Delete } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import ProTable from '@/components/ProTable/index.vue';
import DeviceForm from '@/views/dept/deptList/components/DeviceForm.vue';
import type { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface';

defineOptions({
  name: 'DeviceBinding'
});

const route = useRoute();
const fleetId = ref<number>(0);

// Get fleetId from route query parameters
if (route.query.fleetId) {
  fleetId.value = Number(route.query.fleetId);
}

const proTableRef = ref<ProTableInstance>();
const deviceFormRef = ref<InstanceType<typeof DeviceForm>>();

// 表格配置项
const columns: ColumnProps<any>[] = [
  { prop: 'deviceId', label: '设备ID', width: 150 },
  { prop: 'deviceType', label: '设备类型', width: 120 },
  { prop: 'bindTime', label: '绑定时间', width: 180 },
  { prop: 'status', label: '状态', width: 100 },
  { prop: 'createTime', label: '创建时间' },
  { prop: 'updateTime', label: '更新时间', width: 180 },
  { prop: 'operation', label: '操作', width: 160, fixed: 'right' }
];

// 搜索条件项
const searchColumns: SearchProps[] = [
  { prop: 'deviceId', label: '设备ID', el: 'input' },
  { 
    prop: 'status', 
    label: '状态', 
    el: 'select',
    enum: [
      { label: '已绑定', value: 'bound' },
      { label: '未绑定', value: 'unbound' }
    ]
  }
];

// 获取表格列表 (模拟数据)
const getTableList = (params: any) => {
  // 这里应该调用实际的API
  // 暂时返回模拟数据
  return Promise.resolve({
    data: {
      current: 1,
      limit: 10,
      totalPage: 1,
      total: 0,
      rows: []
    }
  });
};

// 打开设备表单（新增/编辑）
const openDeviceForm = (title: string, row: any = {}) => {
  const params = {
    title,
    row: { ...row },
    fleetId: fleetId.value,
    getTableList: proTableRef.value?.getTableList
  };
  deviceFormRef.value?.acceptParams(params);
};

// 解绑设备
const unbindDevice = async (row: any) => {
  ElMessageBox.confirm(`确定要解绑设备【${row.deviceId}】吗？`, '提示', {
    type: 'warning'
  }).then(async () => {
    try {
      // 这里应该调用实际的解绑API
      console.log('解绑设备:', row.id);
      proTableRef.value?.getTableList();
    } catch (error) {
      console.error('解绑设备失败:', error);
    }
  }).catch(() => {
    // 取消解绑
  });
};

// 监听路由变化
watch(() => route.query.fleetId, (newVal) => {
  if (newVal) {
    fleetId.value = Number(newVal);
    if (proTableRef.value) {
      proTableRef.value.searchParam.fleetId = fleetId.value;
      proTableRef.value.getTableList();
    }
  }
});
</script>

<style scoped lang="scss">
.device-binding {
  padding: 20px;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.font-medium {
  font-weight: 500;
}
</style>